import { defineComponent, onMounted, reactive, ref } from "vue";
import { getRankListRequest } from "../../api/api";
import Scroll from '../Scroll'
import Block from './Block'
import './style.scss'

export default defineComponent({
  name: 'Rank',
  setup() {
    const state = reactive({
      list1: [],
      list2: []
    })

    const scrollRef = ref(null)

    onMounted(() => {
      getRankListRequest().then((res) => {
        state.list1 = res.list.slice(0, 4)
        state.list2 = res.list.slice(4)
        scrollRef.value.refresh()
      })
    })

    const renderList1 = () => state.list1.map((item) => (
      <li>
        <img src={item.coverImgUrl} alt=""/>
        <ul>
          {
            item.tracks.map((innerItem, index) => (<li>{index + 1}.{innerItem.first}-{innerItem.second}</li>))
          }
        </ul>
      </li>
    ))

    const renderList2 = () => state.list2.map((item) => (
      <li>
        <div className="fixed"></div>
        <img src={item.coverImgUrl} />
        <span className="desc">{item.updateFrequency}</span>
      </li>
    ))

    return () => (
      <Scroll scrollY={true} ref={scrollRef}>
        <div className="rank">
          <Block title="官方榜">
            <ul className="list1">{ renderList1() }</ul>
          </Block>
          <Block title="全球榜">
            <ul className="list2">{ renderList2() }</ul>
          </Block>
        </div>
      </Scroll>
    )
  }
})